<template>
  <section class="flex justify-between header-top">
    <div class="">
      <strong class="p-10px inline-block vertical-middle">疾控党建</strong>
      <div class="inline-block ml-20px vertical-middle date">
        <p>{{ date }}</p>
        <p>{{ weekToName[week] }}</p>
      </div>
    </div>
    <div>
      <button>返回</button>
    </div>
  </section>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
const date: string = dayjs().format('YYYY.MM.DD')
const week: string = dayjs().format('d')
const weekToName = {
  '1': '星期一',
  '2': '星期二',
  '3': '星期三',
  '4': '星期四',
  '5': '星期五',
  '6': '星期六',
  '7': '星期日',
}
</script>

<style lang="less">
.header-top {
  padding: 15px 44px;
  height: 144px;
  background: url('@/assets/images/header-bg.png') no-repeat;
  background-size: cover;
  strong {
    font-size: 50px;
    font-family: HYk2gj;
    font-style: italic;
    text-shadow: 4px 0px 2px #000000;
    letter-spacing: 10px;
  }
  .date {
    font-weight: 500;
    font-style: italic;
    font-size: 20px;
    color: #95acbe;
    letter-spacing: 4px;
  }
}
</style>
